<script setup>
import { ref } from 'vue';
import { addChapters } from '@/api/post.js'; // 导入 addChapters 方法

const emit = defineEmits(['submit-success']);

const props = defineProps({
  courseId: {
    type: Number,
    required: true
  }
});

const form = ref({
  chapterName: '',
  info1: '',
  info2: ''
});

const onSubmit = async () => {
  console.log('提交表单:', form.value);

  // 构造请求数据
  const requestData = {
    title: form.value.chapterName,
    course_id: props.courseId // 使用从父组件传递的 courseId
  };

  try {
    // 调用 addChapters 方法
    const response = await addChapters(requestData);
    console.log('提交成功:', response.data);

    // 触发提交成功事件
    emit('submit-success');

    // 清空表单（可选）
    form.value = {
      chapterName: '',
      info1: '',
      info2: ''
    };
  } catch (error) {
    console.error('提交失败:', error);
  }
};
</script>

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="章节名">
      <el-input v-model="form.chapterName" placeholder="请输入章节名"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
/* 你可以在这里添加样式 */
</style>
